<template>
    <el-card>
        <!-- 路径导航 -->
        <div slot="header">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: '/home' }"> <i class="el-icon-house"></i> 首页</el-breadcrumb-item>
                <el-breadcrumb-item>商品管理</el-breadcrumb-item>
                <el-breadcrumb-item>商品分类</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <!-- 筛选区域 -->
        <div class="filter-bar">
            <!-- 筛选表单 -->
            <div class="l-form">
            </div>
            <!-- 右侧按钮 -->
            <div class="r-btn">
                <el-button type="primary" size="small" icon="el-icon-plus" @click="addDialogShow=true">增加</el-button>
            </div>
        </div>
        <!-- 表格 -->
        <div class="table-box">
            <!-- 分类表格
                :data(设置数据源) 
                :columns(设置表格中列配置信息)
                :selection-type(是否有复选框)
                :expand-type(是否展开数据) 
                show-index(是否设置索引列) 
                index-text(设置索引列头)
                border(是否添加纵向边框) 
                :show-row-hover(是否鼠标悬停高亮) 
            -->
            <tree-table
                :data="cateList"
                :columns="columns"
                :expand-type="false"
                :selection-type="false"
                :show-index="true"
            >
                <template slot-scope="scope" slot="canuse">
                    <i class="el-icon-error" v-if="scope.row.cat_deleted"></i>
                    <i class="el-icon-success" v-else></i>
                </template>
                <template slot-scope="scope" slot="level">
                    <el-tag type="danger" v-if="scope.row.cat_level == 0" size="small" >一级</el-tag>
                    <el-tag type="primary" v-if="scope.row.cat_level == 1" size="small">二级</el-tag>
                    <el-tag type="success" v-if="scope.row.cat_level == 2"  size="small" >三级</el-tag>
                </template>
                <template  slot="action">
                    <el-button 
                        type="success" 
                        size="small" 
                        circle 
                        icon="el-icon-edit" 
                    ></el-button>
                    <el-button 
                        type="danger" 
                        size="small"  
                        circle 
                        icon="el-icon-delete"
                    ></el-button>
                </template>
            </tree-table>
            <!-- 分页组件 -->
            <el-pagination
                @size-change="sizeChange"
                @current-change="pageChange"
                :current-page.sync="pagenum"
                :page-sizes="[10, 20, 30, 40]"
                :page-size="pagesize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total" background>
            >
            </el-pagination>
        </div>

        <!-- 添加弹框 -->
        <el-dialog
            title="添加分类"
            :visible.sync="addDialogShow"
            width="40%"
        >
            <!-- 添加表单 -->
            <el-form :model="addForm" ref="addForm" :rules="addFormRules" label-width="80px" >
                <el-form-item label="分类名" prop="cat_name">
                    <el-input v-model="addForm.cat_name"></el-input>
                </el-form-item>
                 <el-form-item label="上级分类">
                     <el-cascader
                     v-model="addForm.cat_pid"
                    :options="cateAllList"
                    :props="{ checkStrictly: true, value:'cat_id', label:'cat_name' }"
                    clearable></el-cascader>
                    {{addForm.cat_pid}}
                </el-form-item>
            </el-form>
            <span slot="footer">
                <el-button @click="addDialogShow = false">取消</el-button>
                <el-button type="primary" @click="addCateSubmit">确定</el-button>
            </span>
        </el-dialog>
        
    </el-card>
</template>

<script>    
    // 定义一个初始干净的数据
    let defaultItem = {
        cat_pid:0,   // 父级ID
        cat_name:'',  // 分类名称
        cat_level:0  // 层级
    }
    export default {
        data() {
            return {
                cateList: [],  // 分类列表 
                cateAllList:[],  // 所有的分类数据
                total:0,  // 总数
                pagenum:1,  // 页码
                pagesize:10,  // 每页数量
                columns:[  // 树形表格列的信息
                    { label:'分类名', prop:'cat_name' },
                    { label:'是否有效', type:"template", template:'canuse' },
                    { label:'层级', type:"template", template:'level' },
                    { label:'操作', type:"template", template:'action'},
                ],
                addDialogShow:false, // 添加弹框是否打开
                addForm:{  // 添加表单
                   ...defaultItem
                },
                addFormRules:{  // 添加表单规则
                    cat_name:[
                        { required:true, message:'请输入分类名', trigger:'blur' },
                        {min:2, max:8, message:'长度在2-8', trigger:'blur' },
                    ]
                }
            }
        },
        created () {
            this.getCateList()
            this.getAllCateList()
        },
        methods: {
            // 获取商品分类列表
            async getCateList() {
                // 1.请求发送
                let { data:res } = await this.$axios.get('categories',{
                    params:{
                        pagenum:this.pagenum,
                        pagesize:this.pagesize
                    }
                })
                // 2.错误处理
                if( res.meta.status !== 200 ) return this.$message.error('数据请求出错')
                // 3.赋值数据
                this.cateList = res.data.result
                this.total = res.data.total
            },
            // 获取所有分类数据
             async getAllCateList() {
                // 1.请求发送
                let { data:res } = await this.$axios.get('categories')
                // 2.错误处理
                if( res.meta.status !== 200 ) return this.$message.error('数据请求出错')
                // 3.赋值数据
                this.cateAllList = res.data
            },
            // 页码更换
            pageChange(val){
                this.pagenum = val
                this.getCateList()
            },
            // 每页数量变化
            sizeChange(val){
                this.pagesize = val
                this.getCateList()
            },
            // 添加商品分类
            addCateSubmit(){
                this.$refs.addForm.validate(async valid=>{
                    if(!valid) return
                    // 处理层级  【层级等于数组的长度+1，但是层级从0开始，所以就等于数组长度】
                    // 处理父级ID  【等于数组里面的最后一个元素】
                    if(Array.isArray(this.addForm.cat_pid)){
                        if(this.addForm.cat_pid.length){
                            this.addForm.cat_level = this.addForm.cat_pid.length
                            this.addForm.cat_pid = this.addForm.cat_pid[this.addForm.cat_pid.length-1]
                        }else{
                            this.addForm.cat_pid = 0
                            this.addForm.cat_level = 0
                        } 
                    }
                    // 数据请求
                    let { data:res } = await this.$axios.post('categories',this.addForm)
                    // 错误梳理
                    if(res.meta.status !== 201) return this.$message.error(res.meta.msg)
                    // 成功提示
                    this.$message.success(res.meta.msg)
                    // 重置表单数据！
                    this.addForm = {
                       ...defaultItem
                    }
                    // 关闭弹框
                    this.addDialogShow = false
                    // 拉取最新列表
                    this.getCateList()
                })
            }
        },
    }
</script>

<style lang="less" scoped>

</style>